perf(settings): lazy load sub-settings pages to optimize load time#2358
Merged
Conversation
Eagerly instantiating all 9 sub-settings screens causes massive layout overhead when opening the settings menu, especially on lower-end devices. By using ECMAScript getters on `uiSettings` to lazy-load these pages on demand, the initial open load time drops by ~93% (from ~981ms to ~70ms on a 6x CPU throttle).
Contributor
Greptile SummaryThis PR optimizes the settings page open time by converting the 9 sub-settings pages from eager to lazy initialization, and separately eliminates a forced reflow in
Confidence Score: 5/5Safe to merge; the lazy-loading mechanism is correctly implemented and the search/restore helpers are properly scoped to avoid unintended eager initialisation. The core lazy-loading logic is sound: getters self-replace with data properties after first access, the src/components/WebComponents/wcPage.js — the anonymous scroll listener added in the Important Files Changed
Sequence Diagram%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant U as User
participant MS as mainSettings()
participant US as appSettings.uiSettings
participant SP as Sub-Settings Page
U->>MS: Open Settings
MS->>US: Set main-settings (eager)
MS->>US: defineProperty(lazy getter, enumerable:false) x9
note over U,SP: Pages NOT yet instantiated
U->>US: Navigate to sub-page (e.g. editor-settings)
US->>SP: getter fires → initializer()
SP-->>US: page instance returned
US->>US: redefine as data property (enumerable:true)
SP-->>U: Page shown
U->>US: Type in search box (first keystroke)
US->>US: getOwnPropertyNames → all 9 keys
US->>SP: Trigger remaining lazy getters (batch init)
SP-->>US: page instances cached in settingsPages[]
US-->>U: Search results
U->>US: Subsequent search keystrokes
US->>US: settingsPages already cached
US-->>U: Search results (no re-init)
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant U as User
participant MS as mainSettings()
participant US as appSettings.uiSettings
participant SP as Sub-Settings Page
U->>MS: Open Settings
MS->>US: Set main-settings (eager)
MS->>US: defineProperty(lazy getter, enumerable:false) x9
note over U,SP: Pages NOT yet instantiated
U->>US: Navigate to sub-page (e.g. editor-settings)
US->>SP: getter fires → initializer()
SP-->>US: page instance returned
US->>US: redefine as data property (enumerable:true)
SP-->>U: Page shown
U->>US: Type in search box (first keystroke)
US->>US: getOwnPropertyNames → all 9 keys
US->>SP: Trigger remaining lazy getters (batch init)
SP-->>US: page instances cached in settingsPages[]
US-->>U: Search results
U->>US: Subsequent search keystrokes
US->>US: settingsPages already cached
US-->>U: Search results (no re-init)
Reviews (3): Last reviewed commit: "fix united page issue" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
deadlyjack
approved these changes
Jun 22, 2026
github-project-automation
Bot
moved this from Backlog
to Done
in The Code Board - Acode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Eagerly instantiating all 9 sub-settings screens causes massive layout overhead when opening the settings menu, especially on lower-end devices. By using ECMAScript getters on
uiSettingsto lazy-load these pages on demand, the initial open load time drops by ~93% (from ~981ms to ~70ms on a 6x CPU throttle).